<template>
	<view>
		<view class="logo">
			<view class="img">
				<image :src="logo" mode="widthFix"></image>
			</view>
		</view>

		<view class="form re">
			<view class="username">
				<input placeholder="请输入手机号" v-model="mobile" placeholder-style="color: #ccc;" />
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="password" password=true placeholder-style="color: #ccc;" />
			</view>
			<view class="btn" @click="doLogin" :disabled="disabled">立即登录</view>
			<view class="res">
				<view @click="toReg">没有账号,立即注册</view>
				<view @click="toYGlogin" class="rpwd">员工登录</view>
			</view>
		</view>

		<view class="form re bottom-btn">
			<button class="btn b-btn" open-type="getUserInfo" lang="zh_CN" @getuserinfo="wxxcxLogin">微信一键登录</button>
		</view>


	</view>
</template>

<script>
	import {
		checkPhone,
		isEmpty,
		isEmptyObj
	} from '../../utils';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				mobile: "",
				password: "",
				disabled: true
			}
		},
		computed: {
			...mapState('user', ['token', 'openid', 'wxMiniOpenId']),
			...mapState('sys', ['logo']),
		},
		onLoad() {

		},
		onBackPress() {
			return uni.switchTab({
				url: '/pages/user/user'
			})
		},
		methods: {
			...mapMutations('user', ['setToken', 'setUserInfo', 'setWxMiniOpenId', 'setOpenId']),
			...mapMutations('sys', ['setLogo']),

			// #ifdef MP-WEIXIN
			wxxcxLogin() {
				const that = this;
				uni.login({
					provider: 'weixin',
					success: (loginRes) => {
						const code = loginRes.code;
						uni.getUserInfo({
							provider: 'weixin',
							success: (infoRes) => {
								const info = infoRes.userInfo;
								const params = {
									'userName': info.nickName,
									'password': 123456,
									'code': code,
									'avatar': info.avatarUrl,
								}

								that.$ajax.get('superUser/loginOnWebWechat', params).then(res => {
									console.log(res);
									if (res.success) {
										this.setToken(res.result);
										this.disabled = true;
										this.$toast(res.message);
										that.$ajax.get('superUser/getMyInfo').then(
										data => {
											console.log(data);
											if (data.success) {
												that.setUserInfo(data.result);
											}
										})
										setTimeout(function() {
											uni.navigateBack();
										}, 500)
									} else {
										this.$toast(res.message);
									}
								})


							},
							fail: () => {
								uni.showToast({
									title: "微信登录授权失败",
									icon: "none"
								});
							}
						})
					},
					fail: () => {
						uni.showToast({
							title: "微信登录授权失败",
							icon: "none"
						});
					}
				})
			},
			//#endif


			toReg() {
				return uni.navigateTo({
					url: '/pages/public/register'
				})
			},
			toYGlogin() {
				uni.navigateTo({
					url: '/pages/public/resetpwd'
				});
			},
			doLogin() {
				uni.hideKeyboard();
				if (!checkPhone(this.mobile)) {
					this.$toast('请输入正确的手机号');
					this.disabled = false;
					return false;
				}
				if (isEmpty(this.password)) {
					this.$toast('密码必须填写');
					this.disabled = false;
					return false;
				}

				const params = {
					mobile: this.mobile,
					password: this.password
				}
				this.$ajax.get('superUser/loginOnWeb', params).then(res => {
					if (res.success) {
						this.setToken(res.result)
						this.disabled = true;
						this.$toast(res.message);
						this.$ajax.get('superUser/getMyInfo').then(data => {
							console.log(data);
							if (data.success) {
								this.setUserInfo(data.result);
							}
							if (!data.result.roles) {
								uni.switchTab({
									url: '/pages/user/user'
								})
							} else {
								uni.navigateBack();
							}
						})
					} else {
						this.$toast(res.message);
						this.password = '';
						this.disabled = false;
					}
				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
		height: 100%;
	}

	.icon {
		color: #ffffff;
	}

	.logo {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.img {
			width: 200rpx;
			height: 200rpx;
			margin: 50rpx 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 100%;
				border: 1px solid $base-color;
			}
		}
	}

	.form {
		width: 100%;
		padding: 0 7%;
		font-size: 30upx;

		.username,
		.password,
		.code {
			width: 100%;
			height: 80upx;
			display: flex;
			align-items: center;
			border-radius: 45upx;
			background-color: #FFFFFF;
			border: 1px solid $base-color;
			padding: 0 45upx;
			box-sizing: border-box;
			margin-bottom: 26upx;

			input {
				width: 100%;
				height: 50upx;
				color: $font-color-000;
				font-weight: 200;
				font-size: $font-lg;
			}
		}

		.btn {
			color: #FFFFFF;
			width: 100%;
			height: 90upx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30upx;
			background-color: $nav-bg;
			font-size: $font-lg;
		}
	}

	.re {
		.username {
			position: relative;

			.get-code {
				position: absolute;
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: center;
				right: 0;
				padding: 0 40upx;
				z-index: 3;

				&:after {
					content: " ";
					width: 2upx;
					height: 50upx;
					background-color: $nav-bg;
					position: absolute;
					z-index: 3;
					margin-right: 100%;
					left: 0;
					top: 20upx;
				}
			}
		}

		.res {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100upx;
			color: #999999;
		}

		.rpwd {
			color: $base-color;
			margin-left: 30upx;
		}
	}

	.bottom-btn {
		position: absolute;
		bottom: 80rpx;
	}

	.b-btn {
		border-radius: 0rpx !important;
	}
</style>